﻿@using System.IO
@using System.Text

<style>
    .file-upload-input {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 10;
        opacity: 0;
    }
</style>

<MudForm Model="@_model"
         @bind-IsValid="_isValid"
         @bind-IsTouched="_isTouched"
         ValidationDelay="0">
    <MudItem xs="12">
        <MudStack Style="width: 100%">
            <MudFileUpload T="IBrowserFile"
                           @ref="@_fileUpload"
                           @bind-Files="@_model.File"
                           Accept=".png,.jpg,.jpeg"
                           Hidden="@false"
                           tabindex="-1"
                           Required="@true"
                           @ondrop="@ClearDragClass"
                           @ondragenter="@SetDragClass"
                           @ondragleave="@ClearDragClass"
                           @ondragend="@ClearDragClass">
                <ActivatorContent>
                    <MudPaper Height="300px"
                              Outlined="true"
                              Class="@_dragClass">
                        <MudText Typo="Typo.h6">
                            Drag and drop files here or click
                        </MudText>
                        <MudChip T="string"
                                 Color="Color.Dark"
                                 Text="@_model.File?.Name"
                                 tabindex="-1" />
                    </MudPaper>
                </ActivatorContent>
            </MudFileUpload>
            <MudToolBar Gutters="@false"
                        Class="relative d-flex justify-end gap-4">
                <MudButton id="open-file-picker-button"
                           OnClick="@OpenFilePickerAsync">
                    Open file picker
                </MudButton>
                <MudButton id="clear-button"
                           OnClick="@ClearAsync">
                    Clear
                </MudButton>
            </MudToolBar>
        </MudStack>
    </MudItem>
    <MudItem xs="12">
        IsValid: @_isValid - IsTouched: @_isTouched
    </MudItem>
</MudForm>

@code {
    private Model _model = null!;
    private bool _isValid;
    private bool _isTouched;
    private string _dragClass = DefaultDragClass;
    private MudFileUpload<IBrowserFile>? _fileUpload;
    private const string FileContent = "this is content";
    private const string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full z-10";

    protected override void OnInitialized()
        => _model = new Model();

    private void SetDragClass()
        => _dragClass = $"{DefaultDragClass} mud-border-primary";

    private void ClearDragClass()
        => _dragClass = DefaultDragClass;

    private Task OpenFilePickerAsync()
        => _fileUpload?.OpenFilePickerAsync() ?? Task.CompletedTask;

    private Task ClearAsync()
        => _fileUpload?.ClearAsync() ?? Task.CompletedTask;

    public class Model
    {
        public IBrowserFile? File { get; set; } = new BrowserFile(
            Guid.NewGuid().ToString(),
            DateTimeOffset.Now,
            default,
            "text/plain",
            Encoding.ASCII.GetBytes(FileContent));
    }

    public record BrowserFile(string Name, DateTimeOffset LastModified, long Size, string ContentType, byte[] Content) : IBrowserFile
    {
        public Stream OpenReadStream(long maxAllowedSize = 512000, CancellationToken cancellationToken = default) => new MemoryStream(Content);
    }
}
